<template>
  <div>
    <div style="width: 100%" class="flex flex-reverse">
      <el-select v-model="query[0].year" placeholder="请选择年份">
        <el-option
          v-for="item in years"
          :key="item.value"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  <div class="flex flex-row">
    <div :style="{width: '200px'}" class="priceUl">
      <div class="priceTitle flex a-item j-content">价格套</div>
      <div class="priceContent">
        <div v-for="item in tableData.suitPriceInfo">{{item.suitName }}&nbsp&nbsp&nbsp&nbsp&nbsp{{item.taxPrice.toFixed(2) }}</div>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName" ref="nav"  type="card" @tab-click="handleClick">
      <el-tab-pane v-if="orderType === 'SAVE'" label="销售记录" name="1">
        <el-table
          :data="tableData.salesPriceInfo"
          border
          :height="tableHeight"
          style="width: 100%">
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column
            prop="busDate"
            label="业务日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="orderType"
            label="单据类型"
            width="100">
            <template slot-scope="{row}">
              {{ row.orderType === '1'?'销售订单':'退货单' }}
            </template>
          </el-table-column>

          <el-table-column
            prop="orderCode"
            label="单据编号"
            width="180">
            <template slot-scope="scope">
              <span  class="codeJump" @click="jump(scope.row)">
                {{scope.row[`orderCode`]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsCount"
            label="数量"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="acceptGoodsCount"
            label="发货数量"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="noTaxPrice"
            label="未税单价"
            width="80"
          >
          </el-table-column>
          <el-table-column
            prop="taxPrice"
            label="含税单价"
            width="80"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史促销价"  v-if="orderType === 'SAVE'"  name="2">
        <el-table
          :data="tableData.salesPromotionPriceInfo"
          border
          :height="tableHeight"
          style="width: 100%">
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column
            prop="busDate"
            label="业务日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户"
            width="180">
          </el-table-column>
          <el-table-column
            prop="noTaxPrice"
            label="未税单价">
          </el-table-column>
          <el-table-column
            prop="taxPrice"
            label="含税单价">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="query[1].page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="tableData.salesPromotionPriceTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="历史采购价" name="3">
        <el-table
          :data="tableData.buyPriceInfo"
          border
          :height="tableHeight"
          style="width: 100%">
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column
            prop="busDate"
            label="业务日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="供应商"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goodsCount"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="noTaxPrice"
            label="未税单价">
          </el-table-column>
          <el-table-column
            prop="taxPrice"
            label="含税单价">
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="query[2].page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="tableData.buyPriceTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="历史采购促销价" name="4">
        <el-table
          :data="tableData.buyPromotionPriceInfo"
          border
          :height="tableHeight"
          style="width: 100%">
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column
            prop="busDate"
            label="业务日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="供应商"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderCode"
            label="协议编号">
          </el-table-column>
          <el-table-column
            prop="noTaxPrice"
            label="协议未税价">
          </el-table-column>
          <el-table-column
            prop="taxPrice"
            label="协议价">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注">
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="query[3].page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="tableData.buyPriceTotal">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="退货记录" v-if="orderType === 'SAVE'"  name="5">
        <el-table
          :data="tableData.salesReturnPriceInfo"
          border
          :height="tableHeight"
          style="width: 100%">
          <el-table-column type="index" width="60" label="序号"/>
          <el-table-column
            prop="busDate"
            label="业务日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户"
            width="180">
          </el-table-column>
          <el-table-column
            prop="orderCode"
            label="退货订单编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goodsCount"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="acceptGoodsCount"
            label="退货数量">
          </el-table-column>
          <el-table-column
            prop="noTaxPrice"
            label="未税单价">
          </el-table-column>
          <el-table-column
            prop="taxPrice"
            label="含税单价">
          </el-table-column>
        </el-table>
      </el-tab-pane>
<!--      <el-tab-pane label="价格套" name="6">-->
<!--        <el-table-->
<!--          :data="tableData.suitPriceInfo"-->
<!--          border-->
<!--          :height="tableHeight"-->
<!--          style="width: 100%">-->
<!--          <el-table-column type="index" width="60" label="序号"/>-->
<!--          <el-table-column-->
<!--            prop="suitName"-->
<!--            label="价格套名称"-->
<!--            width="180">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="noTaxPrice"-->
<!--            label="未税单价">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="taxPrice"-->
<!--            label="含税单价">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination-->
<!--          :current-page.sync="query[5].page"-->
<!--          :page-sizes="[10, 20, 50, 100]"-->
<!--          :page-size="10"-->
<!--          layout="sizes, prev, pager, next"-->
<!--          :total="tableData.suitPriceTotal">-->
<!--        </el-pagination>-->
<!--      </el-tab-pane>-->
    </el-tabs>
    </div>
  </div>
  </div>
</template>

<script>
import crudBasSaleSystem, { priceInfo } from '@/api/erp/salesOrder'
import { getDict } from '../../../api/erp/tableColumnConfig'

export default {
  name: "priceDetail",
  props:{
    data:Object,
    goodsId:[String,Number],
    customerId:[String,Number],
    orderType:{
      type:String,
      default:'SAVE'
    }
  },
  data(){
    return {
      activeName: '1',
      query:[
        {page: 1,size:10, year: ''},
        {page: 1,size:10},
        {page: 1,size:10},
        {page: 1,size:10},
        {page: 1,size:10},
        {page: 1,size:10},
      ],
      years:[],
      tableHeight:200,
      tableData:{
        salesPriceInfo:[],
        salesPriceTotal:0,
        salesPromotionPriceInfo:[],
        salesPromotionPriceTotal:0,
        buyPriceInfo:[],
        buyPricePriceTotal:0,
        buyPromotionPriceInfo:[],
        buyPromotionPriceTotal:0,
        salesReturnPriceInfo:[],
        salesReturnPriceTotal:0,
      }
    }
  },
  created() {
    this.getYear()
    if(this.$parent.$parent.showPriceDialog){
      this.onGet()
    }
    if (this.orderType === 'BUY')this.activeName='3'
  },
  mounted() {

    let _eventHandlers = [];
    setTimeout(()=>{
      document.getElementsByClassName('el-tabs__nav').keydown= null
      document.getElementsByClassName('el-tabs__nav')[0].children.keydown= null
    },1000)

  },
  watch:{
    '$parent.$parent.rowIndex'(){
      if(this.$parent.$parent.showPriceDialog){
        this.onGet()
        // this.getPrice()
      }
    },

    '$parent.$parent.showPriceDialog'(n){
      if(n){
        this.onGet()
        // this.getPrice()
      }
    },
    query:{
      handler(n,o){
        this.onGet()
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    onGet(){
      const query = this.query[Number(this.activeName) - 1]
      const goodsId = this.$parent.$parent.crud.data[this.$parent.$parent.rowIndex].goodsId
      crudBasSaleSystem.priceInfo({goodsId:goodsId,customerId:this.customerId,type:this.activeName,...query})
        .then(res => {
          this.$set(this.tableData,'suitPriceInfo',res.data.suitPriceInfo.content)
          this.$set(this.tableData,'suitPriceTotal',res.data.suitPriceInfo.totalElements)
          switch (this.activeName){
            case '1':
              this.$set(this.tableData,'salesPriceInfo',res.data.salesPriceInfo.content)
              this.$set(this.tableData,'salesPriceTotal',res.data.salesPriceTotal.totalElements)
              break
            case '2':
              this.$set(this.tableData,'salesPromotionPriceInfo',res.data.salesPromotionPriceInfo.content)
              this.$set(this.tableData,'salesPromotionPriceTotal',res.data.salesPromotionPriceInfo.totalElements)
              break
            case '3':
              this.$set(this.tableData,'buyPriceInfo',res.data.buyPriceInfo.content)
              this.$set(this.tableData,'buyPriceTotal',res.data.buyPriceInfo.totalElements)
              break
            case '4':
              this.$set(this.tableData,'buyPromotionPriceInfo',res.data.buyPromotionPriceInfo.content)
              this.$set(this.tableData,'buyPriceTotal',res.data.buyPriceInfo.totalElements)
              break
            case '5':
              this.$set(this.tableData,'salesReturnPriceInfo',res.data.salesReturnPriceInfo.content)
              this.$set(this.tableData,'salesReturnPriceotal',res.data.salesReturnPriceInfo.totalElements)
              break
          }
      }).catch((res)=>{
        console.log("请求结束")
      })
    },
    jump(row){
      console.log(row)
      this.$router.push({path:'/sale/salesorderDetail/'+row.orderId})
    },
    async getYear(){
      const data = {dictCode: 'dict_order_year',size: 999}
      const years = await getDict(data)
      // const year = new Date().getFullYear()
      this.years = years.content.filter(item=>item.value <= year)
      // this.query[0].year = year
    },
    getPrice(){
      crudBasSaleSystem.priceInfo({goodsId:this.$parent.$parent.$refs.table.store.states.currentRow.goodsId,customerId:this.customerId,type:6,page:1,size:999})
        .then(res => {
              this.$set(this.tableData,'suitPriceInfo',res.data.suitPriceInfo.content)
              // this.$set(this.tableData,'suitPriceTotal',res.data.suitPriceInfo.totalElements)
        }).catch((res)=>{
        console.log("请求结束")
      })
    },
    handleClick(tab, event) {
      this.onGet()
    }
  },
}
</script>

<style lang="scss" scoped>

.priceTitle{
  height: 50px;
}
.priceContent{
  padding-left: 20px;
  overflow:auto;
  height: 200px;
  div{
    padding: 5px 0 ;
  }
}
.codeJump{
  background-image:-webkit-linear-gradient(top,yellow,#ff00fb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  cursor: pointer;
}
</style>

